<template>
    <view :style="{ '--color': color }" v-if="Person">
        <status-bar :title="Person.title" :hideBg="hideBg" :txtColor="txtColor" :backColor="backColor" statusHeight></status-bar>
        <view class="rows p-re">
            <image :src="$online('bg.png')" mode="widthFix" class="rows"></image>
            <view class="info d-flex j-sb a-center">
                <view class="d-flex a-center">
                    <image :src="$imgUrls(Person.head_img)" mode="aspectFill" class="headImg"></image>
                    <view class="d-flex f-column m-left20">
                        <text class="white size28">{{ Person.name }}</text>
                        <text class="white h6 m-top12">{{ Person.phone }}</text>
                    </view>
                </view>
                <view class="iconfont icon-server white size54" @click="call()"></view>
            </view>
        </view>

        <view class="stay">
            <view class="Code flexac" @click="extendBtn">
                <image :src="$online('code.png')" mode="aspectFill" class="code_Img"></image>
            </view>
            <view class="d-flex f-column">
                <text class="black size32 bold">待配送 (单)</text>
                <text class="color_2D size40 m-top20">{{ Person.waitDelivered }}</text>
            </view>
            <!--  <view class="row j-sb m-top30">
                <view class="d-flex f-column">
                    <text class="black size28">累计配送费 ({{ nameDefinition.profitUnit }})</text>
                    <text class="color_2D size40 m-top20">{{ Person.allMoney }}</text>
                </view>
                <view class="d-flex f-column" @click="toUrl('/moneyPage/capital/withdraw')">
                    <view class="d-flex a-center">
                        <text class="black size28 m-right10">可提现 ({{ nameDefinition.profitUnit }})</text>
                        <view class="iconfont icon-a-zujian32 h6 color_99"></view>
                    </view>
                    <text class="color_2D size40 m-top20">{{ Person.income }}</text>
                </view>
            </view> -->
        </view>

        <u-sticky :customNavHeight="totalHeight">
            <view class="Tasbox">
                <u-tabs :list="list1" :lineColor="color" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle" @click="click"></u-tabs>
            </view>
        </u-sticky>

        <view class="List" v-for="(item, index) in pageData" :key="index" @click="toUrl(`deliveryDetails?res_id=${item.res_id}`)">
            <view class="row j-sb a-center">
                <text class="black size28">单号：{{ item.order_code }}</text>
                <view class="daiine" v-if="item.state_text">{{ item.state_text }}</view>
            </view>
            <view class="d-flex a-center m-top10">
                <text class="black size28">{{ item.res_name }}</text>
                <text class="black size28 m-left20">{{ item.res_tel }}</text>
            </view>
            <text class="color_66 size26 p-top10" v-if="item.res_address">{{ item.res_address }}</text>
            <text class="color_66 size26 p-top10" v-if="item.reservationDate">预约时间：{{ item.reservationDate }}</text>
            <view class="color_66 size26 m-top10" v-if="item.allGoodsName">配送商品：{{ item.allGoodsName }}</view>
        </view>
        <emptys v-if="!pageData.length"></emptys>

        <view class="foter" v-if="pageData.length && state == 1" @click="batchOperateOrder">一键出库</view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    import Api from '@/common/Api.js';
    export default {
        data() {
            return {
                hideBg: true,
                txtColor: true,
                backColor: true,
                title: '',
                pageData: [],
                Person: '',
                list1: [
                    {
                        name: '全部',
                        state: 0
                    },
                    {
                        name: '待配送',
                        state: 1
                    },
                    {
                        name: '配送中',
                        state: 1.5
                    },
                    {
                        name: '已送达',
                        state: 2
                    }
                ],
                state: 0,
                page: 1,
                pageNum: 10,
                getMore: true
            };
        },

        async onShow() {
            const deliveryPerson = await Api.apiStaffInfo();
            if (deliveryPerson) this.Person = deliveryPerson;
            this.init();
        },
        methods: {
            apiOrderList() {
                this.$http
                    .post({
                        url: '/selfDeliveryApi/apiOrderList',
                        data: {
                            state: this.state,
                            page: this.page,
                            pageNum: this.pageNum
                        }
                    })
                    .then((res) => {
                        if (res.code != 100) return this.$Toast(res.msg);
                        const result = res.data || [];

                        this.page == 1 ? (this.pageData = result) : (this.pageData = [...this.pageData, ...result]);
                        if (result.length < this.pageNum) this.getMore = false;
                    });
            },
            click(e) {
                this.pageData = [];
                this.state = e.state;
                this.init();
            },
            init() {
                this.page = 1;
                this.getMore = true;
                this.apiOrderList();
            },
            // 一键出库
            async batchOperateOrder() {
                const flag = await this.$Modals('提示', '确定一键出库吗？');
                if (!flag) return;
                this.$http
                    .post({
                        url: '/selfDeliveryApi/batchOperateOrder',
                        data: {
                            state: this.state
                        }
                    })
                    .then((res) => {
                        if (res.code != '100') return this.$Toast(res.msg);
                        this.$Toast(res.msg);
                        this.init();
                    });
            },
            stateTxt(state) {
                if (!state) return '';
                const Item = this.list1.find((n) => n.state == state);
                if (!Item) return '';
                return Item.name;
            }
        },
        onReachBottom() {
            if (!this.getMore) return;
            this.page++;
            this.apiOrderList();
        },
        onPageScroll(e) {
            const scrollTop = e.scrollTop;
            if (scrollTop >= 100) {
                this.hideBg = false;
                this.txtColor = false;
                this.backColor = false;
            } else {
                this.hideBg = true;
                this.txtColor = true;
                this.backColor = true;
            }
        },
        computed: {
            ...mapState(['startUp', 'nameDefinition', 'share', 'color', 'totalHeight']),
            activeStyle() {
                return {
                    color: this.color,
                    fontSize: '32rpx'
                };
            },
            inactiveStyle() {
                return {
                    color: '#333',
                    fontSize: '32rpx'
                };
            }
        }
    };
</script>
<style lang="scss">
    page {
        background-color: $page;
        padding-bottom: 30rpx;
    }
</style>
<style lang="scss" scoped>
    .info {
        width: 100%;
        box-sizing: border-box;
        padding: 0 30rpx;
        position: absolute;
        top: 180rpx;
        left: 0;
        z-index: 10;
        .headImg {
            width: 90rpx;
            height: 90rpx;
            border-radius: 50%;
        }
    }

    .stay {
        width: 690rpx;
        background-color: #fff;
        margin: -150rpx auto 0 auto;
        box-shadow: 0rpx 4rpx 11rpx 1rpx rgba(0, 0, 0, 0.1);
        border-radius: 6rpx;
        padding: 20rpx;
        position: relative;
        z-index: 10;
        .Code {
            width: 88rpx;
            height: 80rpx;
            background: #2d77ff;
            border-radius: 0rpx 0rpx 8rpx 8rpx;
            position: absolute;
            top: 0;
            right: 20rpx;
            .code_Img {
                width: 40rpx;
                height: 40rpx;
            }
        }
    }

    .Tasbox {
        width: 100%;
        height: 84rpx;
        background-color: #fff;
        padding: 0 20rpx;
    }
    .List {
        width: 710rpx;
        background-color: #fff;
        padding: 20rpx;
        margin: 24rpx auto 0;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;
        .daiine {
            padding: 6rpx 16rpx;
            background-color: var(--color);
            color: #fff;
            font-size: 24rpx;
            border-radius: 10rpx;
        }
    }
    .foter {
        width: 240rpx;
        height: 70rpx;
        background-color: var(--color);
        color: #fff;
        font-size: 28rpx;
        border-radius: 35rpx;
        position: fixed;
        bottom: 20rpx;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
